<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>触屏界面按键输入和撤销</title>
<style type="text/css">
	li {
		display: inline-block;
	}
	.keyboard {
		width: 220px;
		text-align: center;
		/*防止鼠标选中*/
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.keyboard li {
		border: 1px solid #000000;
		width: 45px;
		height: 45px;
		line-height:45px;
		margin: 5px;
	}
	.keyboard li:last-child {
		width: 100px;
	}
	/*按钮按下交互*/
	.keyboard li:active {
		background: #eee;
	}
</style>
<script src="../js/commonJs.js"></script>
<script type="text/javascript" src="//res.waygc.net/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<pre>
	鼠标点击点击九宫格数字，可以在输入框中显示输入的数字。
</pre>
<ul class="number_input">
	<li>电话号码：</li>
	<li><input type="text" id="number_input" maxlength="11" /></li>
</ul>
<ul class="keyboard" id="number_keyboard">
	<li>7</li><li>8</li><li>9</li><li>4</li><li>5</li><li>6</li><li>1</li><li>2</li><li>3</li><li>0</li><li>退格</li>
</ul>
<script type="text/javascript">
Common.keyPut($("#number_input"), $("#number_keyboard"), function(idCardNum) {
	return String(idCardNum).length < 11;
});
</script>
</body>
</html>